<!-- 2020年2月17日18:18:53 完成 -->
<template>
	<view class="address" style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;" :style="{'--bg': common.appStyle.home_nav_color}">
		<view class="address-box" style="box-shadow: 0vw 0vw 1vw 0.1vw  #eee;">
			<view class="edgeInsetTop"></view>
			<view class="cu-form-group cu-form-group-first" v-show="addressType">
				<view class="title">收货人</view>
				<input type="text" placeholder="请输入收货人名称" v-model="addressData.name"></input>
			</view>
			<view class="cu-form-group" v-show="addressType">
				<view class="title">手机号</view>
				<input type="number" placeholder="请输入收货人手号码" maxlength="11" v-model="addressData.mobile"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所在区域</view>
				<input type="text" style="margin: 0;padding: 0;" @tap.stop="btnClick"
					:value="!isLocation ? String(addressData.province) + String(addressData.city) + String(addressData.district) : '获取位置中...'"
					placeholder="请选择区域信息" />
				<image @tap="haveLocation" style="width: 3.73vw; height: 5.06vw;margin-left: 2vw; "
					src="../../../static/images/user/wz.png" mode=""></image>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">详细地址</view>
				<textarea maxlength="-1" @input="getInputtips" @focus="focusInputtips" @confirm="confirmInputtips"
					@blur="blurInputtips" :placeholder-style="addressData.adcode == '' ? 'color: #bbb' : ''"
					:adjust-position="false"
					:value="addressData.address ? (addressData.address_name + addressData.address) : ''"
					:disabled="addressData.adcode == '' ? true : false"
					:placeholder="addressData.adcode == '' ? '还没有选择地区哦~ 选择地区后完成此项' : '请输入您的街道和门牌号'"></textarea>
			</view>
			<view class="cu-form-group margin-top-bj cu-form-group-last" v-show="addressType">
				<view class="title">设为默认地址 </view>
				<!-- <switch @change="switchChange"  :class="addressData.default == 1?'checked':''"
					:checked="addressData.default == 1"></switch> -->
				<switch class='switch.orange' @change="switchChange" style="transform:scale(0.8)" />
			</view>
			<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
				<view class="item" v-for="(item, index) in addressList.tips" :key="index" @tap="addressTisp(item)">
					<view>{{ item.address }}</view>
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>

		</view>

		<!-- 1.0.5升级 -->
		<!-- 1.0.6升级 -->
		<view style="width: 96vw;margin: 0;padding: 0; " class="padding-bj flex flex-direction margin-top"
			v-show="addressType">
			<button
				style="bottom: 60rpx; position: fixed; width: 720rpx; background-color: #FD7601; color: white;font-size: 4vw; border-radius: 106.93vw; "
				@tap="confirm" class="cu-btn lg">保存</button>
		</view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress" :level="3"></wanl-address>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				},
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true,
				isLocation: false
			}
		},
		computed: {
			...mapState(['common']),
		},
		onLoad(option) {
			let title = '新增地址';
			if (option.type === 'newadd') {
				this.addressData.default = 1
			}
			if (option.type === 'edit') {
				title = '编辑地址'
				this.addressData = JSON.parse(option.data)
			}
			this.manageType = option.type;
			this.$wanlshop.title(title);
			uni.setNavigationBarColor({
			  frontColor:'#000000', // 导航栏标题颜色，只能是'black'或'white'
			  backgroundColor:this.common.appStyle.home_nav_color // 导航栏背景颜色
			});
		},
		onNavigationBarButtonTap() {
			this.confirm()
		},
		methods: {
			// 定位
			async haveLocation() {
				console.log('获取定位中...')
				this.isLocation = true;
				let res = await this.$wanlshop.location();
				console.log('获取所在城市aaaa', res)

				if (res.code == 1) {
					res = res.data
					this.addressData.province = res.address.province;
					this.addressData.city = res.address.city;
					this.addressData.district = res.address.district;
					this.addressData.adcode = res.address.adcode;
				} else {
					this.addressData.city = '定位失败，请手动选择'
					this.addressData.province = '';
					this.addressData.district = '';
					this.addressData.adcode = '';
				}
				this.isLocation = false;
			},

			switchChange(e) {
				if (e.detail.value) {
					this.addressData.default = 1;
				} else {
					this.addressData.default = 0;
				}
			},
			btnClick() {
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
				this.addressData.address = '';
			},
			//调用高德地图搜索相关地址
			getInputtips(event) {
				let keywords = event.detail.value;
				console.log('addressList', this.addressList)
				if (keywords) {
					uni.request({
						url: 'https://restapi.amap.com/v3/assistant/inputtips',
						data: {
							key: this.$wanlshop.config('amapkey'),
							keywords: keywords,
							location: this.addressList.location,
							city: this.addressList.adcode
						},
						success: (res) => {
							let addressList = [];
							console.log('res', res)
							res.data.tips.forEach(item => {
								if (item.address.length == 0) {
									item.address = '暂未收录地址';
									item.location = '113.294701,22.666562';
								}
								addressList.push(item);
							});
							this.addressList.tips = addressList;
						}
					});
				}
			},
			// 详细地址失去焦点
			blurInputtips(event) {
				this.addressData.address = event.detail.value;
				setTimeout(() => {
					this.addressType = true;
				}, 10);
			},
			// 详细地址已完成
			confirmInputtips(event) {
				this.addressType = true;
			},
			// 详细地址获取焦点
			focusInputtips(event) {
				this.addressType = false;
			},
			// 详细地址替换
			addressTisp(data) {
				this.addressData.adcode = data.adcode;
				this.addressData.address = data.address;
				this.addressData.address_name = data.name;
				this.addressData.location = data.location;
				this.addressType = true;
			},
			//提交
			//提交
			confirm() {
				let data = this.addressData;
				if (!data.name) {
					this.$wanlshop.msg('请填写收货人姓名');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				if (!data.city) {
					this.$wanlshop.msg('请选择地区');
					return;
				}
				if (!data.address) {
					this.$wanlshop.msg('请填写详细信息');
					return;
				}
				this.$wanlshop.prePage().refreshList(data, this.manageType);
				this.$wanlshop.msg(`地址${this.manageType == 'edit' ? '修改' : '添加'}成功`);
				this.$wanlshop.back(1);
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.address {
		background-color: var(--bg);
		padding: 18rpx;
		min-height: 100%;
	}
	.address-box {
		background-color: #ffffff;
		width: 100%;
		border-radius: 16rpx;
	}
	.cu-form-group {
		padding: 0 25rpx;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
		font-size: 26rpx;
	}

	.cu-form-group input,
	.cu-form-group textarea {
		font-size: 26rpx;
	}
	.cu-form-group-first {
		border-radius: 16rpx 16rpx 0 0;
	}
	.cu-form-group-last {
		border-radius: 0 0 16rpx 16rpx;
	}

	.cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}

	.tipsScroll {
		width: 100%;
		height: 500rpx;
		padding: 0 50rpx;
	}

	.tipsScroll .item {
		margin: 25rpx 0;
	}

	.tipsScroll .item view {
		color: #B8B8B8;
		font-size: 22rpx;
	}

	.tipsScroll .item text {
		color: #333;
	}

	.selected-item-active {
		border-bottom: 2px solid $theme !important;
	}
</style>